<template>
	<view class="container">
		<!-- 地图组件，占满整个屏幕 -->
		<map class="full-map" :longitude="longitude" :latitude="latitude" :show-location="true" :markers="mks"
			:enable-3D="true"></map>

		<!-- 固定高度的面板 -->
		<view class="fixed-panel">
			<!-- 面板内容 -->
			<view class="panel-content">
				<view class="panel-handle"></view>
				<view class="row">
					<text class="label">当前位置：</text>
					<text class="value">{{currentLocation}}</text>
				</view>
				<!-- 目的地输入框 -->
				<view class="row">
					<text class="label">目的地：</text>
					<input type="text" v-model="destination" placeholder="请输入您要到达的地方" @confirm="submitContent"
						class="input-field" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 1.引入
	//引入qqmap  sdk
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'

	// 引入底部导航组件
	import BottomNav from '../../components/BottomNav/BottomNav.vue'

	export default {
		components: {
			BottomNav
		},
		data() {
			return {
				longitude: '',
				latitude: '',
				long: '',
				lat: '',
				qqmapsdk: '',
				mks: '',
				address: '',
				//当前位置
				currentLocation: '',
				//目的地输入框
				destination: '',
			};
		},
		methods: {
			//提交目的地地址
			submitContent() {
				const content = this.destination.trim();
				if (content) {
					// 模拟提交操作
					console.log(content, 11111111111);
					//显示图标
					this.qqmapsdk.geocoder({
						address: content,
						success: (res) => {
							console.log("地理编码成功:", res);
							const result = res.result;
							const latitude = result.location.lat;
							const longitude = result.location.lng;
							this.mks = [{
								id: 0,
								title: res.title,
								latitude: latitude,
								longitude: longitude,
								iconPath: '../../static/destination.png', //图标路径
								width: 50,
								height: 50,
							}]
						  console.log(latitude,longitude,"目的地");
						  console.log(this.longitude,this.latitude,"出发地");
						  uni.navigateTo({
							url: `/pages/selectCar/selectCar?startLat=${this.latitude}&startLng=${this.longitude}&endLat=${latitude}&endLng=${longitude}`
						  })
						},
						fail: (err) => {
							console.error("地理编码失败:", err);
						},
						complete: () => {
							// 无论成功或失败，都清空输入框（可选）
							console.log("清空")
							this.destination = '';
						}
					})
					// 清空输入框
					this.destination = '';
				}
			},
			//获得用户当前位置
			getUserLocation() {
				console.log("111222");
				//使用定位api
				this.qqmapsdk = new QQMapWX({
					key: 'XQ5BZ-2WYW3-UPH3H-RXWXX-B5DRK-6CBJG'
				});
				const self = this;
				//获得当前的位置信息
				uni.getLocation({
					type: "gcj02",
					success(res) {
						console.log(res);
						this.lat = res.latitude;
						this.long = res.longitude;
						self.longitude = res.longitude;
						self.latitude = res.latitude;
						// this.
						console.log(this.lat, this.long)
						self.getAddress(this.lat, this.long);
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			getAddress(lat, long) {
				console.log(lat, long, 23232);
				// 地址解析
				this.qqmapsdk.reverseGeocoder({

					location: {
						latitude: lat,
						longitude: long
					},
					success: (res) => {
						console.log('当前位置', res);
						let {
							address,
							ad_info
						} = res.result;
						this.address = ad_info.city ? ad_info.city : '定位失败';
						this.currentLocation = res.result.address;
						console.log('地址', this.address);
					},
					fail: (err) => {
						console.error('错误信息', err);
					}
				});

			},
		},
		//2.实例化对象
		//调用 qqmapsdk---腾讯地图官方文档
		onLoad: function() {
			console.log('', 2222222222222)
			this.getUserLocation();

			// 实例化API核心类
		},
	};
</script>

<style>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.full-map {
		width: 100%;
		height: 100%;
	}

	.fixed-panel {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 15vh;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	/* 上拉面板的样式内容 */
	.panel-content {
		padding: 20rpx;
		text-align: center;
	}

	.panel-handle {
		width: 60rpx;
		height: 8rpx;
		background-color: #ccc;
		border-radius: 4rpx;
		margin: 0 auto 20rpx;
	}

	.row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		width: 150rpx;
		/* 固定标签宽度，保持对齐 */
		font-size: 28rpx;
		color: #333;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		color: #666;
		word-break: break-all;
		/* 防止长文本溢出 */
	}

	.input-field {
		flex: 1;
		height: 80rpx;
		padding: 0 30rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 固定底部菜单样式 */
	.bottom-menu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx; /* 根据实际图标和文本大小调整 */
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
		z-index: 100; /* 确保菜单在最上层 */
	}

	.bottom-menu .menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom-menu .menu-icon {
		width: 40rpx; /* 根据实际图标大小调整 */
		height: 40rpx; /* 根据实际图标大小调整 */
		margin-bottom: 4rpx;
	}

	.bottom-menu .menu-text {
		font-size: 24rpx;
		color: #333;
	}
</style>